<template>
	<view>
		<!-- 表格显示 -->
		<table class="table" :fontSize="'20'" border-color="#ffffff">
			<tr class="tr u-border-bottom">
				<th class="th" :style="{'fontSize':'16rpx'}">可回收物</th>
				<th v-if="!isDeliver" class="th" :style="{'fontSize':'16rpx'}">单价</th>
				<th class="th" :style="{'fontSize':'16rpx'}">重量</th>
				<!-- <th class="th" :style="{'fontSize':'16rpx'}">毛重</th>
				<th class="th" :style="{'fontSize':'16rpx'}">皮重</th> -->
				<th v-if="!isDeliver" class="th" :style="{'fontSize':'16rpx'}">金额</th>
				<th class="th" :style="{'fontSize':'16rpx'}">操作</th>
			</tr>
			<tr v-for="(item,index) in tableList" :key="item.id" class="tr u-p-t-30 u-p-b-30 u-border-bottom">
				<td class="td">
					<view class="u-flex u-col-top">
						<view>
							<view class="u-flex u-col-center u-row-center">
								<text v-if="item.typeRemarks" class="tag">备</text>
								<u-icon v-if="item.hasPic" name="photo"></u-icon>
								<text class="u-font-16">{{item.name}}</text>
							</view>
							<!-- <view class="u-font-14">({{item.isweighing?'KG':'件'}})</view> -->
						</view>
						<text class="u-p-l-6" v-if="item.pic"><u-icon name="arrow-down" color="#909399" size="12"></u-icon></text>
					</view>
				</td>
				<td class="td" v-if="!isDeliver">
					<!-- <input v-if="item.allowedit" class="input-text" v-model="item.price" type="digit" :class="item.err?'err':''" :min="item.minprice" :max="item.highprice" input-align="center" placeholder="单价" :disabled="!item.allowedit" @input="upDate(item,index)"/> -->
					
					<view 
						style="width: 90%;height: 30rpx;line-height: 30rpx;" 
						class="input-text" 
						:class="item.err?'err':''" 
						:min="item.minprice" 
						:max="item.highprice" 
						@click="setCustomInputNumber(item,index,'price')">
						{{item.price || '--'}}
					</view>
				</td>
				<td class="td">
					<!-- <input class="input-text" v-model="item.weight" :class="item.weight?'':'err'" type="digit" input-align="center" placeholder="" @input="upDate"/> -->
				
					<view
						style="width: 90%;height: 30rpx;line-height: 30rpx;" 
						class="input-text" 
						:class="item.weight?'':'err'" 
						@click="setCustomInputNumber(item,index,'weight')">
						{{item.weight || '--'}}
					</view>
				</td>
				<!-- <td class="td">
					<input class="input-text" v-model="item.tareWeight" :class="item.tareWeight?'':'err'" type="digit" input-align="center" placeholder="" @input="upDate"/>
				</td> -->
				<td class="td" v-if="!isDeliver"><text class="price u-text-center">{{getPrice(item.price*item.weight)}}</text></td>
				<td class="td">
					<view>
						<view class="del" @click="delGoods(item,index)">
							<u-icon size="16rpx" name="close-circle"></u-icon>
							<text class="u-font-12">删除</text>
						</view>
						<view class="del" @click="getWeigh(index)">
							<u-icon size="16rpx" name="plus-circle"></u-icon>
							<text class="u-font-12">称重</text>
						</view>
						<!-- <view class="del" @click="setTyperemarks(item,index)">
							<u-icon size="16rpx" name="edit-pen"></u-icon>
							<text class="u-font-12">备注</text>
						</view> -->
					</view>
				</td>
			</tr>
		</table>
		
		<!-- 数字键盘 -->
		<u-keyboard 
			ref="uKeyboard" 
			mode="number" 
			:tips="keyBoardTips"
			:dotDisabled="false" 
			:show="keyboardShow" 
			@change="valChange" 
			@backspace="backspace" 
			@cancel="keyboardShow = false" 
			@close="keyboardShow = false"
			@confirm="keyboardShow = false">
		</u-keyboard>
		
		<!-- 称重操作提示 -->
		<u-popup 
			:show="show" 
			mode="center" 
			round="14" 
			:closeable="true"
			:closeOnClickOverlay="false"
			@close="show = false">
			<view class="u-p-60 u-w-500" v-if="show == true">
				<view class="u-text-center">
					<u-icon name="/static/images/cheng.png" size="160" style="margin: 0 auto;display: inline-block;"></u-icon>
				</view>
				<view class="u-p-t-20 u-p-r-40 u-p-l-40 u-text-center">
					<text class="u-font-32">请放置回收物,待稳定后称重...</text>
				</view>
				<!-- 称重显示 -->
				<view class="u-p-t-30 u-p-r-40 u-p-l-40">
					<view><text class="u-font-28 u-tips-color">当前重量为：</text></view>
					<view v-if="loading" class="u-text-center">
						<u-loading-icon></u-loading-icon>
					</view>
					<view v-else class="u-p-t-16 u-p-b-16 u-text-center">
						<text class="u-font-100" :class="isSteady?'yes':'no'">{{weight}}</text><text>KG</text>
					</view>
				</view>
				<view class="u-p-r-40 u-p-l-40 u-p-t-30">
					<view class="u-flex">
						<u-button class="u-flex-1 u-m-r-15" @click="operate('minus')" type="warning"><u-icon name="minus" color="#ffffff"></u-icon><text class="u-p-l-10">去皮减重</text></u-button>
						<u-button class="u-flex-1" @click="operate('plus')" type="primary"><u-icon name="plus" color="#ffffff"></u-icon><text class="u-p-l-10">确定加重</text></u-button>
					</view>
				</view>
				<!-- <view class="u-p-t-30 u-p-r-40 u-p-l-40">
					<view class="u-flex">
						<u-button type="primary" class="u-m-l-10" @click="confirmWeigh">确定</u-button>
					</view>
				</view> -->
			</view>
		</u-popup>
		
		<!-- 设置备注 -->
		<u-popup
			:show="showRemarks" 
			mode="center" 
			round="14" 
			:closeable="true"
			:closeOnClickOverlay="false"
			@close="showRemarks = false">
			<view class="u-p-60 u-w-500">
				<view class="u-text-center u-p-b-30"><text class="u-font-36">填写{{typeRemarks.item.name}}的备注</text></view>
				<u-textarea v-model="typeRemarks.content" :focus="showRemarks" :height="140"></u-textarea>
				<view class="u-p-t-30">
					<u-button type="primary" @click="confirmSetRemarks">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		commonStore
	} from "@/store/common.js"
	import {
		devicesStore
	} from "@/store/devices.js"
	import tool from "@/util/tool.js"
	// 引入配置
	import config from '@/util/config.js'
	
	export default {
		name:"goods-table-list",
		setup() {
			const common = commonStore()
			const devices = devicesStore()
		
			return {
				common,
				devices
			}
		},
		props:{
			// 表示是否表示出库单列表，true表示是
			isDeliver: {
				type: Boolean,
				default: false
			},
			// 是否上传拍照
			uploadPic:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// 称重
				weighIndex: 0,
				// 操作提示
				show: false,
				loading: true,
				shot: '',
				// 摄像头列表
				cameras: [],
				isStable: true, //表示重量稳定
				// 设置备注
				showRemarks: false,
				typeRemarks: {
					index: 0,
					item: {},
					content: ''
				},
				// 数字键盘
				keyboardShow: false,
				listIndex: null,
				inputType: '',
				keyBoardTips: '请输入'
			};
		},
		computed: {
			token(){
				return this.common.Authorization
			},
			listType(){
				if(this.isDeliver){
					return 'deliverList'
				}else{
					return 'goodsList'
				}
			},
			tableList(){
				return this.common[this.listType]
			},
			weight(){
				return this.devices.devices.Weigh.value
			},
			isSteady(){
				//磅秤稳定状态
				return this.devices.devices.Weigh.isStable
			}
		},
		watch: {
			
		},
		methods:{
			// 弹出自定义数字键盘修改数值
			setCustomInputNumber(item,index,type){
				this.keyboardShow = true
				this.listIndex = index
				this.inputType = type
				this.common[this.listType][this.listIndex][this.inputType] = ''
				// let obj = this.common[this.listType][this.listIndex][this.inputType]
				// if(!obj){
				// 	this.common[this.listType][this.listIndex][this.inputType] = ''
				// }else{
				// 	this.common[this.listType][this.listIndex][this.inputType] = obj.toString() || ''
				// }
				
				this.keyBoardTips = `请输入${this.common[this.listType][this.listIndex].name}的${this.inputType == 'price'?'价格':this.common[this.listType][this.listIndex].isweighing?'重量':'数量'}:${this.common[this.listType][this.listIndex][this.inputType]}`
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.common[this.listType][this.listIndex][this.inputType] += val
				this.keyBoardTips = `请输入${this.common[this.listType][this.listIndex].name}的${this.inputType == 'price'?'价格':this.common[this.listType][this.listIndex].isweighing?'重量':'数量'}:${this.common[this.listType][this.listIndex][this.inputType]}`
			
				this.$emit('update',this.tableList)
				this.checkPrice(this.common[this.listType][this.listIndex],this.listIndex)
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.common[this.listType][this.listIndex][this.inputType].length){
					this.common[this.listType][this.listIndex][this.inputType] = this.common[this.listType][this.listIndex][this.inputType].substr(0, this.common[this.listType][this.listIndex][this.inputType].length - 1);
					this.keyBoardTips = `请输入${this.common[this.listType][this.listIndex].name}的${this.inputType == 'price'?'价格':'重量'}:${this.common[this.listType][this.listIndex][this.inputType]}`
				
					this.$emit('update',this.tableList)
					this.checkPrice(this.common[this.listType][this.listIndex],this.listIndex)
				} 
			},
			getPrice(num){
				return tool.formatMoney(num)
			},
			upDate(item,index){
				this.$emit('update',this.tableList)
				if(index != undefined){
					this.checkPrice(item,index)
				}
			},
			//设置备注 
			setTyperemarks(item,index){
				this.showRemarks = true
				this.typeRemarks.item = item
				this.typeRemarks.index = index
				this.typeRemarks.content = item.typeRemarks || ''
			},
			// 确认设置备注
			confirmSetRemarks(){
				this.common[this.listType][this.typeRemarks.index].typeRemarks = this.typeRemarks.content
				this.showRemarks = false
			},
			//检查设置价格
			checkPrice(e, index) {
				console.log(e)
				let detailsArr = this.tableList
				if (e.price > e.highprice || e.price < e.minprice) {
					detailsArr[index].err = true
				} else {
					detailsArr[index].err = false
				}
				
				this.common[this.listType] = detailsArr
			},
			// 删除小类
			delGoods(item,index){
				this.common[this.listType] = this.tableList.filter((cell)=>cell.id != item.id)
			},
			// 称重
			getWeigh(index){
				this.loading = false
				this.weighIndex = index
				this.show = true
			},
			// 确定称重
			confirmWeigh(type){
				this.show = false
				//当前称重的物品对象
				let _thisObj = this.tableList[this.weighIndex]
				
				if(type == 'plus'){
					this.common[this.listType][this.weighIndex].weight = Number(this.common[this.listType][this.weighIndex].weight) + Number(this.weight)
				}else{
					this.common[this.listType][this.weighIndex].weight = Number(this.common[this.listType][this.weighIndex].weight) - Number(this.weight)
				}
				
				if(this.uploadPic){
					// 抓拍
					let largetypename = _thisObj.largetypename;
					let name = _thisObj.name;
					let weight = this.weight
					
					let imgArr = []
					uni.showLoading({
						title: '抓拍中...'
					})
					this.devices.CapturePicture({
						text:largetypename+"-"+name+ weight+ "KG",
						textSize: 20
					}).then((res) => {
						
						console.log('抓拍完成',res)
						res.forEach((item)=>{
							imgArr.push(item)
						})
						
						uni.showLoading({
							title: '拍照上传中...'
						})
						
						Promise.all(imgArr.map((item,i)=>{
							console.log(`正在上传照片(${i+1}/${imgArr.length})...`,config.fileUploadURL,this.token)
							return new Promise((resolve, reject) => {
								const uploadTask = uni.$u.http.upload(config.fileUploadURL, {
									filePath: item, // 要上传文件资源的路径。
									// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
									custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
									name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
									header: {
										Authorization: this.token
									}
								}).then(res => {
									// 返回的res.data 已经进行JSON.parse
									console.log('抓拍已上传',res)
									// resolve([res.datas.path])
									if(i == imgArr.length-1){
										uni.showToast({
											title: '图片已上传',
											icon: 'none'
										})
									}
									
									// 表示是否上传了图片
									this.common[this.listType][this.weighIndex].hasPic = true
									
									let obj = {
										pic: res.path,
										id: _thisObj.id
									}
									this.$emit('pic', obj)
									resolve(obj)
								}).catch(err => {
									console.log('上传失败',err)
									reject(err)
								}).finally(()=>{
									uni.hideLoading()
								})
							})
						})).then(()=>{
							uni.hideLoading()
						})
					}).finally((err) => {
						uni.hideLoading()
					})
				}
				this.upDate()
			},
			// 加重或减重
			operate(type){
				if(type == 'minus'){
					this.confirmWeigh('minus')
				}else if(type == 'plus'){
					this.confirmWeigh('plus')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table{
		width: 100%;
		.tr{
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-bottom: 10rpx;
			.th{
				height: 40rpx;
				line-height: 40rpx;
				flex: 1;
			}
			.td{
				height: 30rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
		}
	}

	.input-text{
		font-size: 18rpx;
		border: 1px solid rgb(228, 231, 237);
		margin: 0 10rpx;
		text-align: center;
	}
	.err {
		color: $uni-color-error;
		border-color: $uni-color-error !important;
	}
	.price{
		color: $uni-color-orange;
		font-weight: bold;
		font-size: 24rpx;
	}
	.del{
		display: flex;
		color: $uni-tips-color;
		font-size: 16rpx;
		border: 1px solid rgb(228, 231, 237);
		border-radius: 8rpx;
		margin: 4rpx 0;
		padding: 2rpx 10rpx;
		&:active{
			transform: scale(0.98); /* 让按钮看起来被按下 */
			border-color: $uni-color-primary; /* 更深的绿色，模拟按下效果 */
			color: $uni-color-primary;
		}
	}
	.yes{
		// color: $uni-type-success;
	}
	.no{
		color: $uni-color-error;
	}
	.tag{
		font-size: 10px;
		color: #fff;
		background: $uni-color-primary;
		padding: 2px;
		border-radius: 5px;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center
	}
</style>